<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="index" label="序号" width="150"> </el-table-column>
      <el-table-column prop="email" width="250" label="邮箱"> </el-table-column>
      <el-table-column prop="phone" width="350" label="联系电话">
      </el-table-column>
      <el-table-column prop="username" width="250" label="用户名">
      </el-table-column>
      <el-table-column
        prop="permission_group_title"
        width="250"
        label="权限组名称"
      >
      </el-table-column>
      <el-table-column prop="role" width="250" label="角色"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope" v-if="scope.row.id !== 2">
          <div class="btn">
            <addFrom
              :type="'primary'"
              :circle="true"
              :title="'编辑用户'"
              :form="formObj"
              @Open="Open(scope.row.id)"
              @submitForm="editSubmit"
            ></addFrom>
            <!-- <el-button icon="el-icon-delete" plain circle type="danger" @click="delUser(scope.row.id)"></el-button> -->
            <removeBtn :id="scope.row.id" @remove="remove"></removeBtn>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="text-align: right; margin-top: 20px"
      background
      @current-change="currentPage"
      @size-change="handleSizeChange"
      :page-sizes="[1, 10, 20, 30, 50]"
      layout="sizes, prev, pager, next, jumper"
      :total="userObject.counts"
    >
    </el-pagination>
  </div>
</template>

<script>
import addFrom from './addFrom.vue'
import removeBtn from './removeBtn.vue'
import { dateformat } from '@/filters'
import { detail, update } from '@/api/base/users'
export default {
  components: { addFrom, removeBtn },
  props: { tableData: Array, userObject: Object },
  data () {
    return {
      formObj: {}
    }
  },
  methods: {
    currentPage (page) {
      this.$emit('page', page)
    },
    handleSizeChange (current) {
      this.$emit('pageSizes', current)
    },
    async remove (id) {
      await this.$emit('remove', id)
    },
    async Open (id) {
      const { data } = await detail({ id })
      this.formObj = data
    },
    async editSubmit (form) {
      form.create_time = dateformat(form.create_time)
      form.last_update_time = dateformat(form.last_update_time)
      await update(form)
      this.$emit('editSubmit')
      this.$message.success('编辑成功')
    }
  }
}
</script>
<style lang="scss" scoped>
.btn {
  display: flex;
  width: 100%;
  justify-content: space-evenly;
}
</style>
